<template>
    <div class="view">
        <div ref="header" class="nav-back" style="background:rgb(255,255,255);color:#ec6786">
            <span class="iconfont icon-fanhui" @click="back"></span>
            <span class="nickname" style="color:#ec6786">修改自我介绍</span>
            <span class="iconfont  rt" @click="save">保存</span>
        </div>
        <div class="introduce-wrap">
            <cube-textarea v-model="selfIntroduction" :maxlength="500" placeholder="请输入500以内的自我介绍" :autofocus="true" :autoExpand="true"></cube-textarea>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import HeadImg from "@/components/HeadImg.vue";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            HeadImg,
        }
    })
    export default class MineIntroduce extends Scene {
        @State("UserStore")
        public user!: InterfaceUser;

        private get selfIntroduction(): string {
            return String(this.user.introduction || "");
        }

        private set selfIntroduction(text: string) {
            updateUser(Object.assign(this.user, {introduction: text}));
        }

        private introduceText: string = "";

        private back() {
            this.navigateBack();
        }

        private save(): void {
            Http.post(this.api.modifySelfIntroduction, {INTRODUCTION: this.user.introduction}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.authentication();
                    (<any> this).$createToast({
                        type: "correct",
                        txt: "修改成功！正在返回",
                        mask: true,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                } else {
                    this.globalSingleResultToast(res);
                }
            });

        }

    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;

        .nav-back
            width 100vw;
            position relative;
            padding calc(var(--safe-area-inset-top) + 15px) 10px 15px 10px;
            left 0;
            z-index: 100;
            color #fff;
            background rgba(255, 255, 255, 0);

            .icon-share
                font-size 22px;

            .nickname
                font-size 16px;
                color $theme-common-color;

        .introduce-wrap
            margin-top 12px;

            >>> .cube-textarea-wrapper
                height 170px;
                background #fff;

                &::after
                    display none;
</style>
